$(function() {
    load();
    $('#title').on('keydown', function(e) {
        if (e.keyCode === 13) {
            if ($(this).val() === '') {
                alert('输入你想记录的事情');
            } else {
                //先读取本地存储原来的数据
                var local = getData();
                // console.log(local);
                //把最新数据追加到local数组中
                local.push({ title: $(this).val(), done: false });
                saveData(local);
                load();
                $(this).val('');
            }
        }
    });
    //3.todolist删除操作
    $('#todolist, #donelist').on('click', 'a', function() {
        //先获取本地存储
        var data = getData();
        // console.log(data);
        //修改数据
        var index = $(this).attr('id');
        // console.log(index);
        data.splice(index, 1);
        //保存到本地存储
        saveData(data);
        //重新渲染页面
        load();
    });
    // todolist正在进行和已经完成操作
    $('#todolist, #donelist').on('click', 'input', function() {
        //先获取本地存储数据
        var data = getData();
        //修改数据
        var index = $(this).siblings('a').attr('id');
        data[index].done = $(this).prop('checked');
        //保存到本地存储
        saveData(data);
        //重新渲染
        load();
    });
    //读取本地存储的数据
    function getData() {
        var data = localStorage.getItem('todolist');
        if (data != null) {
            //本地存储里的数据为字符串 需要转换为对象格式
            return JSON.parse(data);
        } else {
            return [];
        }
    }
    //保存本地存储数据
    function saveData(data) {
        localStorage.setItem('todolist', JSON.stringify(data));
    }
    //渲染加载数据
    function load() {
        //读取本地存储的数据
        var data = getData();
        // console.log(data);
        //先清空ol里的元素内容 在遍历
        $('#todolist, #donelist').empty();
        var todoCount = 0; //正在进行
        var doneCount = 0; //已经完成
        //遍历数据
        $.each(data, function(index, ele) {
            if (ele.done) {
                $('#donelist').prepend('<li><input type="checkbox" checked="checked"><p>' + ele.title + '</p><a href="javascript:;" id="' + index + '"></a></li>');
                doneCount++;
            } else {
                $('#todolist').prepend('<li><input type="checkbox"><p>' + ele.title + '</p><a href="javascript:;" id="' + index + '"></a></li>');
                todoCount++;
            }
        });
        $('#todocount').text(todoCount);
        $('#donecount').text(doneCount);
    }
});